<template>
    <div>
        <el-card>
            <template #header>
                <div class="cardHeader">
                    <sx-form :inline="true" :formItem="formItem" :data="queryData"></sx-form>
                    <el-button type="primary" @click="dialogVisible = true">{{ $t("新增权限") }}</el-button>
                </div>
            </template>
            <sx-table :data="tableData" rowKey="id" :key="tabelKey" :tableColumn="tableColumn" />
        </el-card>

        <el-dialog v-model="dialogVisible" :title="$t('新增基地')" width="500">
            <sx-form :formItem="dialogItem" v-if="dialogVisible" :data="dialogData" labelPosition="top"></sx-form>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from "vue";
const tabelKey = ref(0);
const dialogVisible = ref(false);
const tableColumn = reactive([
    {
        prop: "id",
        label: "岗位权限",
        type: "text",
    },
    {
        prop: "date",
        label: "权限说明",
        type: "text",
    },
    {
        prop: "name",
        label: "高危管理等级",
        type: "star",
    },
    {
        label: "操作",
        width: "auto",
        type: "buttons",
        children: [
            {
                label: "新增子权限",
                type: "primary",
                link: true,
                disabled: false,
                size: "small",
                click: (data: any) => {},
            },
            {
                label: "编辑",
                type: "primary",
                link: true,
                disabled: false,
                size: "small",
                click: (data: any) => {},
            },
            {
                label: "删除",
                type: "danger",
                link: true,
                disabled: false,
                size: "small",
                click: (data: any) => {},
            },
        ],
    },
]);
const tableData = reactive([
    {
        id: 1,
        date: "2016-05-02",
        name: "wangxiaohu",
        address: "No. 189, Grove St, Los Angeles",
    },
    {
        id: 2,
        date: "2016-05-04",
        name: "wangxiaohu",
        address: "No. 189, Grove St, Los Angeles",
    },
    {
        id: 3,
        date: "2016-05-01",
        name: "wangxiaohu",
        address: "No. 189, Grove St, Los Angeles",
        children: [
            {
                id: 31,
                date: "2016-05-01",
                name: "wangxiaohu",
                address: "No. 189, Grove St, Los Angeles",
            },
            {
                id: 32,
                date: "2016-05-01",
                name: "wangxiaohu",
                address: "No. 189, Grove St, Los Angeles",
            },
        ],
    },
]);
// 查询表单列表
const formItem = [
    {
        prop: "keyWords",
        type: "input",
        label: "权限名称",
        placeholder: "请输入权限名称",
        isKeyup: true,
    },
    {
        type: "buttons",
        children: [
            {
                type: "primary",
                value: "查询",
                subMit: true,
                click: (data: any) => {
                    queryData.keyWords = data.keyWords;
                    // getBaseListItems();
                },
            },
        ],
    },
];
const queryData = reactive({
    keyWords: "",
});
const dialogItem = reactive([
    {
        prop: "baseName",
        type: "input",
        label: "权限名称",
        placeholder: "请输入权限名称",
        rules: [
            {
                required: true,
                message: "请输入权限名称",
                trigger: "blur",
            },
        ],
    },
    {
        prop: "baseName",
        type: "textarea",
        label: "权限说明",
        placeholder: "请输入权限说明",
    },
    {
        prop: "baseName",
        type: "start",
        label: "高危管理等级",
    },
    {
        type: "buttons",
        children: [
            {
                type: "",
                value: "取消",
                click: (data: any) => {
                    console.log(data);
                    dialogVisible.value = false;
                },
            },
            {
                type: "primary",
                subMit: true,
                value: "提交",
                click: (data: any) => {
                    console.log(data);
                },
            },
        ],
    },
]);
const dialogData = reactive({});
</script>
